<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<title></title>
<style>
	ul{list-style: none;margin: 0;padding: 0;}
	div{width:380px;height: 200px;margin: 50px auto;overflow: hidden;}
	div li{width: 140px;height: 200px;float: left;}
	.box1{background: #C0FF3E;}
	.box2{background: #AEEEEE;}
	.box3{background: #8E8E8E;}
	.box4{background: #FF7F50;}
	.box5{background: #8B8B00;}
</style>
</head>
<body>
<div id="box">
<ul>
	<li><div class="box1"></div></li>
	<li><div class="box2"></div></li>
	<li><div class="box3"></div></li>
	<li><div class="box4"></div></li>
	<li><div class="box5"></div></li>
</ul>
</div>
<script>
	//调用入口函数
$(function(){
function init(){
	//初始化
	//改变样子
	$('li').css('width','60px');
	$('li:first').css('width','140px');
	}init();
	//点盒子 展开是140px
	// $('li').click(function(){
		//鼠标触碰事件
		 $('li').mouseenter(function(){
		
		// //收起 兄弟盒子
		 $(this).css('width','140px').siblings().css('width','60px');
		// $(this).css('width','140px');
		// $(this).siblings().css('width','60px');
		
		
		// //收起盒子
		// $('li').css('width','60px');
		// //展开是140px
		// $(this).css('width','140px');
		
		//鼠标离开 后 图片都是第一个变大
	}).mouseleave(init);
	//  $('li').(function(){
		 
	// })
	
	
})


// //改变样子
// $('li').css('width','60px');

</script>


</body>
</html>
